import React from 'react'
import { Input } from 'antd';
import { messages } from "share/common";
import ChooseInfo from "containers/financial-account/template/choose-info";

class ChooseInput extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      showModal: false,
      value: props.value,
      infoData: props.infoData
    }
  }

  componentWillReceiveProps = nextProps => {
    this.setState({ infoData: nextProps.infoData });
  };

  handleFocus = () => {
    this.refs.calRef.focus();
    this.setState({  showModal: true })
  };

  onCancel = () => {
    this.setState({showModal: false})
  };

  onOk = value => {
    const { onOk } = this.props;
    this.setState({
      showModal: false,
      value
    }, () => {
      onOk(value);
    })
  };

  render(){
    const { showModal, value, infoData } = this.state;
    return(
      <div>
        <Input onFocus={this.handleFocus} placeholder={messages('common.please.enter')/*请输入*/} value={value.segmentCode}/>
        <ChooseInfo
          visible={showModal}
          title={messages('financial-account.key189')/*扩展字段*/}
          infoData={infoData}
          format={{ segmentCode: '', segmentName: '', id: '' }}
          onCancel={this.onCancel}
          onOk={this.onOk}
        />
        <div><input ref="calRef" style={{opacity: 0, position: 'fixed', width:0, height:0, zIndex: -1}}/></div>
      </div>
    )
  }
}

ChooseInput.propTypes = {
  infoData: React.PropTypes.array,
  value: React.PropTypes.any,
  onOk: React.PropTypes.func
};

ChooseInput.defaultProps = {
  infoData: [],
  value: {}
};

export default ChooseInput
